
<template>
    <div class="app-container">
      <search-header
        v-show="boo.showSearch"
        :select-prop="selectProp"
        @search-action="searchAction"
      ></search-header>

      <div class="app-permission-container flex-between mb8">
        <span class="page-list-title">用户列表</span>
        <div class="action-content">
          <el-button type="primary" v-hasPermi="['admin:acddUser:export']" size="mini" @click="exportUser"
          >导出</el-button>
        </div>
      </div>
      <div class="app-table-container">
        <el-table
          v-loading="boo.loading"
          :data="list" border
        >
          <el-table-column
            label="用户昵称"
            align="center"
            key="userNickName"
            prop="userNickName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="注册时间"
            align="center"
            key="startTime"
            prop="startTime"
            :show-overflow-tooltip="true" /> 
          <el-table-column
            label="姓名"
            align="center"
            key="name"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="电话"
            align="center"
            key="phone"
            prop="phone"
            width="120"
          />
          <el-table-column
            label="用户定位"
            align="center"
            key="positioning"
            prop="positioning"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="车牌号"
            align="center"
            key="licensePlate"
            prop="licensePlate"
          />
          <el-table-column
            label="剩余待核销"
            align="center"
            key="toBeWrittenOff"
            prop="toBeWrittenOff"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="累计核销笔数"
            align="center"
            key="writeOff"
            prop="writeOff"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="累计核销金额"
            align="center"
            key="writeOffAmount"
            prop="writeOffAmount"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="累计过期订单"
            align="center"
            key="pastOrders"
            prop="pastOrders"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="状态"
            align="center"
            key="userState"
            prop="userState"
            :show-overflow-tooltip="true"
            >
          <template slot-scope="{row}">
            <el-tag size="small" :type="row['userState'] == 1 ? 'success' : 'error'">
              {{ row['userState'] | numToStr(dictsList, 'status') }}
            </el-tag>
          </template>
        </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{row}">
              <el-button
                size="mini"
                type="text" v-hasPermi="['admin:acddUser:query']"
                icon="el-icon-view" :loading="row.isView"
                @click="showDialog('user', 'view', row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="other.total > 0"
          :total="other.total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <dialog-normal
        ref="dialog-user"
        :dialog-prop="{
            title: dialogUser.title,
            height: '55vh',
            width: '60%'
        }"
        @normal-submit="submitDialog('user', dialogUser.currentItem)"
        >
        <template #dialog-content>
          <el-form
            class="form-content"
            ref="user-form" label-position="left"
            :model="dialogUser.currentItem"
            label-width="120px">
            <div class="form-title">用户信息</div>
            <el-form-item class="form-content-item" label="用户昵称">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['userNickName'] || '---'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="微信openid">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['openId'] || '---'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="姓名">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['name'] || '---'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="电话">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['phone'] || '---'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="常用地址">
              <div class="form-val flex-normal">
                <span class="val-txt">
                  {{dialogUser.currentItem['province'] || '---'}} 
                  {{dialogUser.currentItem['city'] || '---'}} 
                  {{dialogUser.currentItem['county'] || '---'}} 
                </span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="注册时间">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['startTime'] || '---'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="用户状态">
              <div class="form-val no-border flex-normal">
                <el-radio-group disabled v-model="dialogUser.currentItem['userState']">
                  <el-radio v-for="(radio, idx) in getDictItem('status')" :key="idx" :label="radio.dictValue">{{radio.dictLabel}}</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="待核销笔数">
              <div class="form-val flex-normal">
                <span class="val-txt">{{dialogUser.currentItem['toBeWrittenOff'] || '0'}}</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="累计核销">
              <div class="form-val flex-normal">
                <span class="val-txt">
                  {{dialogUser.currentItem['writeOff'] || '0'}}笔
                  /
                  {{dialogUser.currentItem['writeOffAmount'] || '0'}}元</span>
              </div>
            </el-form-item>
            <el-form-item class="form-content-item" label="累计失效">
              <div class="form-val flex-normal">
                <span class="val-txt">
                  {{dialogUser.currentItem['pastOrders'] || '0'}}笔</span>
              </div>
            </el-form-item>
            <div class="form-title">订单历史</div>
            <div class="app-table-container">
              <el-table v-loading="dialogUser.loading"
                :data="dialogUser.currentItem['orderList']" border>
                <el-table-column
                  label="活动编号"
                  align="center"
                  key="activityCode"
                  prop="activityCode"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="服务类型"
                  align="center"
                  key="serveType"
                  prop="serveType"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="服务信息"
                  align="center"
                  key="serveMessage"
                  prop="serveMessage"
                />
                <el-table-column
                  label="状态"
                  align="center"
                  key="orderStatus"
                  prop="orderStatus"
                  :show-overflow-tooltip="true"
                />
              </el-table>
              <pagination
                v-show="dialogUser.total > 0"
                :total="dialogUser.total"
                :page.sync="dialogUser.queryParams.pageNum"
                :limit.sync="dialogUser.queryParams.pageSize"
                @pagination="getOrderList"
              />
            </div>
          </el-form>
        </template>
      </dialog-normal>
    </div>
  </template>
  
  <script>
  import {
    getUserList, getUserDetail, exportUser
  } from "@/api/userManage/user";
  import {
    getOrderList
  } from "@/api/orderManage/index";
  export default {
    name: "List",
    components: {
      "search-header": () => import("@/rhComponents/searchHeader/index"),
      "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    },
    filters: {
      numToStr(num, list, type){
        let index = list.findIndex(item => item.name == type)
        if(index == -1) return '未定义参数'
        let idx = list[index].child.findIndex(i => i.dictValue == num)
        if(idx == -1) return '---'
        return list[index].child[idx].dictLabel
      }
    },
    data() {
      return {
        selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
        boo: {
          loading: false, // 遮罩层
          multiple: true, // 非多个禁用
          showSearch: true, // 显示搜索条件
        },
        other: {
          ids: [], // 选中数组
          total: 0, //总条数
        },
        // 地块列表
        list: [],
        dictsList: [
          { label: "用户状态", name: "status", deptType: "status", child: [] },
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        dialogUser: {
          title: '查看详情',
          currentItem: {},
          queryParams: {
            pageNum: 1,
            pageSize: 10
          },
          total: 0,
          loading: false,
        }
      };
    },
    mounted(){
      let _self = this
      _self.initGetDicts().then(res => {
        _self.getList()
      })
    },
    methods: {
      getDictItem(name){
        let item = this.dictsList.find(i => i.deptType == name)
        return item.child
      },
      // 搜索条件查询
      searchAction(prop) {
        this.queryParams = Object.assign(this.queryParams, prop["params"]);
        this.queryParams.pageNum = 1;
        this.getList();
      },
      exportUser(){
        let _self = this
        exportUser({}, 'vip列表').then(res => {
          // console.log(res)
        })
      },
      /** 查询用户列表 */
      getList() {
        this.boo.loading = true;
        getUserList(this.queryParams)
          .then((response) => {
            this.list = response.rows;
            this.other.total = response.total;
            this.boo.loading = false;
          })
          .catch(() => {});
      },
      async getOrderList(){
        let _self = this, {id} = this.dialogUser.currentItem
        _self.$set(_self.dialogUser, 'loading', true)
        await getOrderList({...{userId: id}, ..._self.dialogUser.queryParams}).then(res => {
          _self.$set(_self.dialogUser.currentItem, 'orderList', res.rows)
          _self.$set(_self.dialogUser, 'total', res.total)
        })
        _self.$set(_self.dialogUser, 'loading', false)
      },
      // 事件集合 -- 转发
      actionsMaps(ref, acion, row){
        let _self = this
        let actionsMap = () => {
          return new Map([
            [{ref: 'user', acion: 'view:show'}, ()=>{
              _self.$set(row, 'isView', true)
              getUserDetail(row.id).then(res => {
                _self.dialogUser.currentItem = res.data
                _self.dialogUser.queryParams = {
                  pageNum: 1,
                  pageSize: 10
                }
                _self.getOrderList()
                _self.$nextTick(() => {
                  _self.$refs[`dialog-${ref}`].showDialog = true
                })
              }).finally(() => {
                _self.$set(row, 'isView', false)
              })
            }]
          ])
        }
        let actions = [...actionsMap()].filter(([key,value])=>(key.ref == ref && key.acion == acion))
        actions.forEach(([key,value])=>value.call(this))
      },
      showDialog(ref, type, row) {
        let _self = this;
        if (_self.$refs[`${ref}-form`]) {
          this.resetForm(`${ref}-form`);
        }
        _self.$nextTick(() => {
          _self.actionsMaps(ref, `${type}:show`, row)
        })
      },
      submitDialog(ref, type, row) {
        let _self = this;
        if(this.$refs[`${ref}-form`]){
          this.$refs[`${ref}-form`].validate((valid) => {
            if (valid) {
              _self.$refs[`dialog-${ref}`].loading = true
              _self.actionsMaps(ref, `${type}:submit`, row)
            } else {
              _self.$refs[`dialog-${ref}`].loading = false;
              return false;
            }
          });
        }else{
          _self.$refs[`dialog-${ref}`].loading = true
          _self.actionsMaps(ref, `${type}:submit`, row)
        }
      },
    }
  };
  </script>
  <style scoped lang="scss">
  .form-content{
    .form-content-item{
      position: relative;
      .code-btn-unit{
        position: absolute;
        left: vw(400);
        top: 50%;
        transform: translateY(-50%);
        font-size: vh(13);
        color: #0003AA;
        cursor: pointer;
      }
    }
    .form-title{
      margin-bottom: vh(20);
      line-height: vh(34);
      font-size: vh(13);
      color: #0003AA;
    }
    .form-val {
      width: vw(360);
      flex-wrap: nowrap;
      &.no-border{
        border: none;
      }
    }
  }
  </style>